import "./index.css";
import { React, useEffect, useState, useRef } from "react";
import axios from "axios";
import InterIP from "../../IP/IP";
export default function IntegralModel(props) {
  const [cartData, setCartData] = useState([]);
  const buyNumber = useRef();
  useEffect(() => {
    let IP = InterIP().props.children;
    let integralId = localStorage.getItem('integralId')
    axios.post('http://' + IP + ':3000/index/selIntegral/single', {
      integral_id: integralId,
    }).then((res) => {
      setCartData((cartData) => cartData = res.data);
      props.number(buyNumber.current.defaultValue);
    })
  }, [])// eslint-disable-line react-hooks/exhaustive-deps

  function clickNumMinus() {
    if (buyNumber.current.value <= 1) {
      props.number(buyNumber.current.value);
    } else {
      buyNumber.current.value--;
      props.number(buyNumber.current.value);
    }
  }
  function clickNumAdd() {
    buyNumber.current.value++
    props.number(buyNumber.current.value);
  }
  return (
    <div>
      {cartData.map((data, key) =>
        <div className="tyc_checkSizeWindow" key={key}>
          <div className="lfy_introduce">
            <div>
              <img src={data.integral_img} alt="" />
            </div>
            <h6>{data.integral_name}</h6>
          </div>
          <div className="tyc_price">
            <strong className="tyc_now_price">
              现价：<span>{data.integral_price}积分</span>
            </strong>
            <strong className="tyc_original_price">
              原价：￥<span>{data.original_price}</span>
            </strong>
          </div>

          <div className="tyc_check_size">
            <p>请选择规格：</p>
            <ul className="tyc_size_ul">
              <li>{data.product_number}{data.specification}</li>
            </ul>
          </div>

          <div className="tyc_check_size_num">
            <p>数量：</p>
            <div onClick={clickNumMinus}>-</div>
            <input type="text" defaultValue={props.buyNumber} ref={buyNumber} />
            <div onClick={clickNumAdd}>+</div>件
          </div>
        </div>
      )}

    </div>
  );
}
